
import { initSearchConfig, TableSearchPanel, XxpageContainer, XxTable } from "@/ui";
import React, { useEffect, useRef, useState } from "react";
import { getSearchFields, getActoinPanel, getColumns } from "./config";
import { DatabaseOutlined, EditOutlined } from '@ant-design/icons';
import { bucketConfigApi as api } from "@/api";
import { globalModal } from "@/data";
import styles from "./src/styles/index.module.scss"
import { Card, Col, Row, Tag } from "antd";

/**@description 【存储桶配置】页面 */
const BucketList = () => {
    const searchFormRef = useRef(null); //搜索表单的引用对象，用于获取/操作表单实例
    const editFormRef = useRef(null); //用于引用编辑表单的 ref 对象
    const [params, setParams] = useState({ ...initSearchConfig(getSearchFields({ searchFormRef })) })
    const [state, setState] = useState({
        data: [],
        totalCount: 0
    })
    const [loading, setLoading] = useState(false);

    //搜索事件
    const onClickSearch = (value) => {
        setParams({
            ...params,
            ...value,
            current: 1,
        });
    };


    /**@description 查找列表 */
    const getList = async () => {
        setLoading(true);
        const { data, code, msg } = await api.queryList({ pageSize: 10, current: 1, ...params });
        setState({
            data: [...data.list],
            totalCount: data.totalCount || 0,
        })
        setLoading(false);

    }

    const onChange = (current, pageSize) => {
        setParams({
            ...params,
            current,
            pageSize
        })
    }
    useEffect(() => {
        getList()
    }, [params])



    let list = [];
    for (let i = 0; i < 10; i++) {
        list.push(i);
    }



    const BucketCard = () => {
        return (
            <div className="card">
                <div className="card-container">
                    <div className="card-header">
                        <div className="icon-container">
                            <span className="icon">
                                <DatabaseOutlined size="12px" className="icon-svg" />
                            </span>
                        </div>
                        <div className="status-flag">
                            <span className="name"><Tag color="success">本地存储桶</Tag></span>
                            <span className="status"> <Tag color="error">已禁用</Tag></span>
                        </div>
                    </div>
                    <div className="card-center-container">
                        <div className="bucket-name">
                            存储桶名称
                        </div>
                        <div className="bucket-info">
                            <Tag>图片数量：2</Tag>
                            <Tag>占用存储：2M</Tag>
                        </div>
                        <div className="bucket-info">
                            创建时间：2025-01-01 23:59
                        </div>
                    </div>
                    <div className="card-action-container">
                        <div className="action-box">
                            <div className="action-button">编辑</div>
                            <div className="action-button">启用</div>
                            <div className="action-button">删除</div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }



    return (
        <XxpageContainer >
            <div className={styles.pages}>
                <div className="header-action">
                    <div className="select-bucket">
                        <h4>存储桶配置</h4>
                    </div>
                    <div className="button-action">
                    </div>
                </div>
                <div className="center">

                    <div className="card">
                        <div className="card-container">
                            <div className="card-header">
                                <div className="icon-container">
                                    <span className="icon">
                                        <EditOutlined size="12px" className="icon-svg" />
                                    </span>
                                </div>

                            </div>
                            <div className="card-center-container create-bucket">
                                新建存储桶
                            </div>

                        </div>
                    </div>
                    <BucketCard />
                    {
                        list.map((item, key) => {
                            return <BucketCard key={key} />
                        })
                    }
                </div>
            </div>

        </XxpageContainer>
    )
}

export default BucketList;
